import React, { useRef } from "react";
import style from "./style.module.scss";

interface PropsType {
  // 取消
  onCancel: () => void;
  // 确认
  onConfirm?: () => void;
  // 样式
  type: 'select' | 'switch';
  // 更换形象照
  switchClick?: () => void;
  // 选择图片
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export const MyMack: React.FC<PropsType> = ({ onCancel, onConfirm, type, switchClick, onChange }) => {

  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleUpload = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  return (
    <div>
      {
        <div className={style.mask}>
          <div className={style.footer_box}>
            {
              type === 'select' && (
                <div className={style.picture}>
                  <div>拍一张</div>
                  <input type="file" style={{ display: "none" }} id="getFile" />
                  <div id="getButtonFile" onClick={() =>
                    handleUpload()
                    // console.log('上传图片')
                  }>
                    从相册选择
                  </div>
                </div>
              )
            }
            {
              type === 'switch' && (
                <div className={style.picture}>
                  <div onClick={() => {
                    switchClick && switchClick()
                  }
                  }>更换形象照</div>
                </div>
              )
            }
            <div className={style.cancel} onClick={() => onCancel()}>
              取消
            </div>
          </div>
          <input
            type="file"
            ref={fileInputRef}
            style={{ display: "none" }}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange!(e)}
          />
        </div>
      }
    </div >
  );
};
